<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:panelGroup id="datos">
		<div>
			<div style="text-align: right;" class="panel-formulario">
				<p:panelGrid style="width: 100%">
					<p:row>
						<p:column colspan="4">
							<div class="nombreSubBloque">
								<h:outputLabel value="Datos del cliente " />
							</div>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general" value="Cliente:" />
						</p:column>
						<p:column colspan="3">
							<h:outputText styleClass="label-general"
								value="#{clienteUsuarioController.usuarioCliente.cliente.nombre}" />
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general"
								value="#{etiquetaController.etiquetaRuc}: " />
						</p:column>
						<p:column>
							<h:outputText
								value="#{clienteUsuarioController.usuarioCliente.cliente.ruc}" />
						</p:column>
						<p:column>
							<h:outputLabel styleClass="label-general"
								value="#{etiquetaController.etiquetaDocumentoIdentidad}: " />
						</p:column>
						<p:column>
							<h:outputText
								value="#{cotizacionClienteController.usuarioCliente.cliente.dni}" />
						</p:column>
					</p:row>

					<p:row>
						<p:column colspan="4">
							<div class="data"></div>
						</p:column>
					</p:row>

					<p:row>
						<p:column colspan="4">
							<div class="nombreSubBloque">
								<h:outputLabel value="Datos del usuario" />
							</div>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general" value="Nombres:( * )" />
						</p:column>
						<p:column>
							<p:inputText id="nombresUsuario" maxlength="50"
								value="#{clienteUsuarioController.usuario.nombres}" title="Nombres"
								required="true" requiredMessage="Nombres: Requerido.">
								<f:validator validatorId="alfanumericoValidator" />
								<f:attribute name="campo" value="Nombres" />
								<p:ajax update="msgNombresUsuario" global="false" />
							</p:inputText>
						</p:column>

						<p:column>
							<h:outputLabel styleClass="label-general" value="Apellidos:( * )" />
						</p:column>
						<p:column>
							<p:inputText id="apellidosUsuario" maxlength="50"
								value="#{clienteUsuarioController.usuario.apellidos}"
								title="Apellidos" required="true"
								requiredMessage="Apellidos: Requerido.">
								<f:validator validatorId="alfanumericoValidator" />
								<f:attribute name="campo" value="Apellidos" />
								<p:ajax update="msgApellidosUsuario" global="false"/>
							</p:inputText>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general" value="Tipo doc.:" />
						</p:column>

						<p:column>
							<p:selectOneMenu
								value="#{clienteUsuarioController.usuarioCliente.tipoDocumento.idTipoDocumento}">
								<f:selectItems var="tipoDoc"
									value="#{clienteUsuarioController.listaTipoDocumentos}"
									itemLabel="#{tipoDoc.nombre}"
									itemValue="#{tipoDoc.idTipoDocumento}" />
							</p:selectOneMenu>
						</p:column>

						<p:column>
							<h:outputLabel styleClass="label-general"
								value="Nro. documento:( * )" />
						</p:column>

						<p:column>
							<p:inputText id="numeroDocumento" maxlength="10" required="true"
								requiredMessage="Nro. Documento: Requerido."
								value="#{clienteUsuarioController.usuarioCliente.numeroDocumento}"
								title="Numero de documento">
								<f:validator validatorId="alfanumericoValidator"></f:validator>
								<f:attribute name="campo" value="Nro. Documento" />
								<p:ajax update="msgnumeroDocumento" global="false"/>
							</p:inputText>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general" value="Correo:" />
						</p:column>

						<p:column>
							<p:inputText id="correo" maxlength="50"
								value="#{clienteUsuarioController.usuario.correo}" title="Correo">
								<f:validator validatorId="emailValidator"></f:validator>
								<f:attribute name="campo" value="correo" />
								<p:ajax update="msgcorreo" global="false"/>
							</p:inputText>
						</p:column>

						<p:column>
							<h:outputLabel styleClass="label-general" value="Cargo:( * )" />
						</p:column>

						<p:column>
							<p:inputText id="cargo"
								value="#{clienteUsuarioController.usuarioCliente.cargo}"
								title="Cargo" required="true" maxlength="50"
								requiredMessage="Cargo: Requerido">
								<f:validator validatorId="alfanumericoValidator"></f:validator>
								<f:attribute name="campo" value="Cargo" />
								<p:ajax update="msgcargo" global="false"/>
							</p:inputText>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general"
								value="#{etiquetaController.etiquetaTelefono1}:( * * )" />
						</p:column>

						<p:column>
							<p:inputText id="telefonoFijo" maxlength="10"
								value="#{clienteUsuarioController.usuarioCliente.telefonoFijo}"
								title="tel&#233;fono fijo">
								<f:validator validatorId="telefonoValidator"></f:validator>
							</p:inputText>
						</p:column>

						<p:column>
							<h:outputLabel styleClass="label-general"
								value="#{etiquetaController.etiquetaTelefono2}:( * * )" />
						</p:column>

						<p:column>
							<p:inputText id="rpc" maxlength="10"
								value="#{clienteUsuarioController.usuarioCliente.telefonoRpc}"
								title="RPC">
								<f:validator validatorId="telefonoValidator"></f:validator>
							</p:inputText>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general"
								value="#{etiquetaController.etiquetaTelefono3}:( * * )" />
						</p:column>

						<p:column>
							<p:inputText id="rpm" maxlength="10"
								value="#{clienteUsuarioController.usuarioCliente.telefonoRpm}"
								title="RPM">
								<f:validator validatorId="telefonoValidator"/>
							</p:inputText>
						</p:column>

						<p:column>
							<h:outputLabel styleClass="label-general"
								value="#{etiquetaController.etiquetaTelefono4}:( * * )" />
						</p:column>

						<p:column>
							<p:inputText id="nextel" maxlength="10"
								value="#{clienteUsuarioController.usuarioCliente.telefonoNextel}"
								title="Nextel">
								<f:validator validatorId="telefonoValidator"/>
							</p:inputText>
						</p:column>
					</p:row>

					<p:row>
						<p:column colspan="1">
							<h:outputLabel styleClass="label-general"
								value="Cambiar contrase&#241;a" />
						</p:column>

						<p:column colspan="3">
							<p:selectBooleanCheckbox id="checkbox"
								value="#{clienteUsuarioController.cambiarContrasenia}">
								<p:ajax event="change" global="false" 
									update="contraseniaUsuario,repetirContraseniaUsuario" />
							</p:selectBooleanCheckbox>
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputLabel styleClass="label-general"
								value="Contrase&#241;a:" />
						</p:column>

						<p:column>
							<p:password id="contraseniaUsuario"
								disabled="#{!clienteUsuarioController.cambiarContrasenia}"
								value="#{clienteUsuarioController.usuario.contrasenia}"
								feedback="true" required="true"
								promptLabel="Ingrese una contrase&#241;a"
								weakLabel="Poco segura" title="Contrase&#241;a" 
								goodLabel="Aceptable" strongLabel="Segura" 
								requiredMessage="Contrase&#241;a: Requerida.">
								<p:ajax update="msgcontraseniaUsuario" global="false"/>
							</p:password>
						</p:column>

						<p:column>
							<h:outputLabel styleClass="label-general"
								value="Repetir contrase&#241;a:" />
						</p:column>

						<p:column>
							<p:password id="repetirContraseniaUsuario"
								disabled="#{!clienteUsuarioController.cambiarContrasenia}"
								value="#{clienteUsuarioController.repetirContrasenia}"
								title="Repita la contrase&#241;a" required="true"
								requiredMessage="Contrase&#241;a: Requerida.">
								<p:ajax update="msgRepetirContraseniaUsuario" global="false"/>
							</p:password>
						</p:column>
					</p:row>
				</p:panelGrid>
			</div>

			<p:spacer height="15" />
			<h:outputLabel styleClass="label-general"
				value="( * ) Datos obligatorios" />
			<h:outputLabel styleClass="label-general"
				value="( * * ) Se debe ingresar al menos uno de los datos" />
			<p:spacer height="5" />

			<h:panelGroup id="bloqueDatosUsuario">
				<p:spacer height="10" />
				<div class="bloque">
					<div align="center">
						<p:spacer height="25" />
						<p:commandButton value="Guardar" 
							styleClass="butonSmall"
							action="#{clienteUsuarioController.actualizarDatosContacto}"
							process="datos"
							oncomplete="abrirAlertaSiCorreoVacio(xhr, status, args, wvConfirmacionEdicion )"
							update="panelConfirmacionEdicion,:growl" />
						<p:spacer width="5" />
						<p:commandButton value="Deshacer"
										 styleClass="butonSmall"
										 action="#{clienteUsuarioController.recargarDatos}"
										 update="datos,:growl" process="@this"/>
					</div>
					<div class="panelMessages">
						<p:message id="msgNombresUsuario" for="nombresUsuario" />
						<p:message id="msgApellidosUsuario" for="apellidosUsuario" />
						<p:message id="msgnumeroDocumento" for="numeroDocumento" />
						<p:message id="msgcargo" for="cargo" />
						<p:message id="msgcorreo" for="correo" />
						<p:message id="msgcontraseniaUsuario" for="contraseniaUsuario" />
						<p:message id="msgRepetirContraseniaUsuario" for="repetirContraseniaUsuario" />
					</div>
				</div>
			</h:panelGroup>
		</div>
	</h:panelGroup>


	<p:dialog id="dlgConfirmacionEdicion" widgetVar="wvConfirmacionEdicion"
		closable="true" header="Editar datos" modal="true" resizable="false">
		
		<h:panelGroup id="panelConfirmacionEdicion" layout="block">
			<div align="center">
				<h:outputLabel
					value="&#191;Est&#225; seguro de no ingresar su correo? " />
				<p:spacer height="5" />
				<h:outputLabel style="text-align:center;"
					value=" &#161;Es importante para contactarlo!" />
			</div>
			<div class="panel-botones">
				<p:commandButton value="SI" process="@this, bloqueDatosUsuario"
					update="bloqueDatosUsuario, :growl"
					action="#{clienteUsuarioController.actualizarDatosContacto}"
					icon="ui-icon ui-icon-close" styleClass="butonSmall"
					oncomplete="wvConfirmacionEdicion.hide()" />
				<p:spacer width="5" />
				<p:commandButton value="No" icon="ui-icon ui-icon-close"
					process="@this" onclick="wvConfirmacionEdicion.hide()"
					styleClass="butonSmall" global="false" />
			</div>
		</h:panelGroup>
	</p:dialog>

</ui:composition>